<template>
  <div class="hm-friends-list">
	<swiper   style="height: 100%;width: 100%;line-height: 50rpx;" indicator-dots="true" duration="300" >
		<swiper-item class="firendClass"  v-for="(item,index) in options.list">
		  <div class="hd">
			<text  v-if="options.list.length == 1" class="friendsList">{{ options.friendsList }}</text>
			<text  v-else class="friendsList">第{{index+1}}个空调控制页面</text>
			<image class="img" :src="options.img" />
		  </div>
		  <div>
			  
		  </div>
		  <div class="bd">
			  <view class="disaplay">
				  <view class="col1" >
					<!-- <image class="avator" :src="item.avator" /> -->
					<button class="btn play-pause avator" @tap="btncontrallor(1)">
						<image class="btnicon" src="/static/icon/airOn.png" v-if="item.air.airSwitch"></image>
						<image class="btnicon" src="/static/icon/airOff.png" v-else></image>
					</button>
				  </view>
				  <view class="disaplay-tittle" v-if="airstatic">
					  {{item.air.airTemp}}℃
				  </view>
			  </view>

					<view class="btnjiajian">
						<div class="col1" >
						  <!-- <image class="avator" :src="item.avator" /> -->
							<button class="btn play-pause avator btnja" @tap="btncontrallor(2)">
								<image class="btnicon" src="/static/icon/jia.png"></image>
							</button>
							<text class="miller">风速</text>
							<button class="btn play-pause avator btnjian" @tap="btncontrallor(3)">
								<image class="btnicon" src="/static/icon/jian.png"></image>
							</button>
						</div>
						<view class="btnjiajian-yuan">
							<div class="col1" >
							  <!-- <image class="avator" :src="item.avator" /> -->
								<button class="btn play-pause avator" @tap="btncontrallor(4)">
									<image class="btnicon" src="/static/icon/airlengOn.png" v-if="!options.air.airActive && airstatic"></image>
									<image class="btnicon" src="/static/icon/airleng.png" v-else></image>
								</button>
								<text class="miller">制冷</text>
							</div>
							<div class="col1" >
							  <!-- <image class="avator" :src="item.avator" /> -->
								<button class="btn play-pause avator" @tap="btncontrallor(5)">
									<image class="btnicon" src="/static/icon/airreOn.png" v-if="options.air.airActive && airstatic"></image>
									<image class="btnicon" src="/static/icon/airre.png" v-else></image>
								</button>
								<text class="miller">制热</text>
							</div>
						</view>
						<div class="col1" >
						  <!-- <image class="avator" :src="item.avator" /> -->
							<button class="btn play-pause avator btnja" @tap="btncontrallor(6)">
								<image class="btnicon" src="/static/icon/jia.png"></image>
							</button>
							<text class="miller">温度</text>
							<button class="btn play-pause avator btnjian" @tap="btncontrallor(7)">
								<image class="btnicon" src="/static/icon/jian.png"></image>
							</button>
						</div>
					</view>
					<view class="btnother">
						<div class="col1" >
						  <!-- <image class="avator" :src="item.avator" /> -->
							<button class="btn play-pause avator" @tap="btncontrallor(8)">
								<image class="btnicon" src="/static/icon/airsongfeng.png"></image>
							</button>
							<text class="miller">送风</text>
						</div>
						<div class="col1" >
						  <!-- <image class="avator" :src="item.avator" /> -->
							<button class="btn play-pause avator" @tap="btncontrallor(9)">
								<image class="btnicon" src="/static/icon/airchushi.png"></image>
							</button>
							<text class="miller">除湿</text>
						</div>
						<div class="col1" >
						  <!-- <image class="avator" :src="item.avator" /> -->
							<button class="btn play-pause avator" @tap="btncontrallor(10)">
								<image class="btnicon" src="/static/icon/airauto.png"></image>
							</button>
							<text class="miller">自动</text>
						</div>
					</view>
			</div>
		</swiper-item>
      </swiper>
    
  </div>
</template>
<script>
export default {
  name: 'HmFriendsList',
  props: {
    dataId: {
      type: String,
      default: 'hm-friends-list'
    },
    options: {
      type: Object,
      default: function() {
        return {
          friendsList: '朋友表',
          list:[
						{
							avator:"/static/icon/kongtiao.png",
							text:"张三"
						},
						{
							avator:"/static/icon/kongtiao.png",
							text:"张三"
						}
					]
        };
      }
    }
  },
  data() {
    return {
		airstatic : 0,
		airindex : 0
	};
  },
  onShow(){
  		if(this.options.list[0].air.airSwitch){
			this.airstatic = 0
		}else{
			this.airstatic = 1
		}
   },
  methods: {
		btncontrallor(item){
			this.$parent.btnclick(item,this.airindex);
			
		},
		check(index){
			this.airindex = index
			if(!this.options.list[index].air.airSwitch){
				this.airstatic = 0
			}else{
				this.airstatic = 1
			}
		}
	},
	watch:{
		options:function(){
			console.log(this.options)
			for (var i = 0; i < this.options.list.length; i++) {
				if(!this.options.list[i].air.airSwitch){
					this.airstatic = 0
				}else{
					this.airstatic = 1
				}
			}
			
		}
	}
};
</script>
<style>
@import './index.response.css';
@font-face {
		font-family:display;
		src: url('~@/static/display.ttf');
	}
.btnja{
	border-radius: 25rpx;
	border-bottom-right-radius:0;
	border-bottom-left-radius:0;
	height: 125rpx;
}
.btnjian{
	border-radius: 25rpx;
	border-top-right-radius:0;
	border-top-left-radius:0;
	height: 125rpx;
}
.btnjian{
	box-shadow: -4px 4px -15px rgba(0, 0, 0, 0.15)
}

.btnjian image{
	width: 40rpx;
	height: 40rpx;
	margin-top: 27px;
}
.btnjiajian{
	display: flex;
	justify-content: space-between;
	padding-top: 22px;
}
.btnjiajian-yuan{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding-top: 10rpx;

}
.btnjiajian .cll1{
	width: auto;
}
.btnother{
	display: flex;
	justify-content: space-between;
	padding-top: 40rpx;

}
.disaplay{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.disaplay-tittle{
	font-family: display;
	font-size: 75rpx;
	font-weight: bold;
	margin-right: 120rpx;
	margin-bottom: 15rpx;
	filter: glow(color:#adadad, strength=2);
	color:white; 
	font-weight:900; 
	/* text-shadow: 1px 1px 10px #adadad; */
	text-shadow: 0px -6px 10px white, 0px 4px 15px rgba(0, 0, 0, 0.15);

}
</style>
